<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../vue.js"></script>

</head>

<body>
  <div id="app">
    <!-- 
      插值语法的注意事项：
        1.插值语法中的变量都是从当前的vm对象上寻找的
        2.插值语法中可以书写任意表达式（由一个或者多个变量或值 配合0个或多个运算符组成的 被称为表达式，表达式都会有返回值） 不能书写语句
        3.插值的变量可以是任意类型的，按照一定的规则转为字符串展示（Symbol除外）
     -->
    <h1>{{project}}的基础使用</h1>
    <h1>{{1+1}}</h1>
    <h1>{{5&&0}}</h1>
    <h1>{{isHot?"今天":"昨天"}}</h1>
    <h1>{{hobby[0]}}</h1>
    <h1>{{score}}</h1>
    <h1>null---{{null}}</h1>
    <h1>undefined----{{undefined}}</h1>

    <!-- 不能识别Symbol -->
    <!-- <h1>Symbol----{{Symbol("sy1")}}的基础使用</h1> -->
    <h1>bigInt----{{1n}}</h1>
    <h1>arr----{{hobby}}</h1>


  </div>


  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          project: "Vue",
          isHot: false,
          hobby: ["唱", "跳", "rap"],
          score: {
            ch: 100,
            math: 80
          }
        };
      }
    })
  </script>
</body>

</html>